<template>
  <div v-show="isShowPage" v-loading.fullscreen="pushStateloading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <template v-if="total">
      <!-- filter -->
      <el-form class="form" :model="search" :inline="true" size="mini">
        <div class="form-btn">
          <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
          <el-button size="mini" @click="handleReset">清空</el-button>
        </div>
        <el-row :gutter="20">
          <el-col :lg="4" :md="6" :sm="7">
            <el-form-item>
              <el-autocomplete
                v-model="search.estate"
                :fetch-suggestions="loadSearchEstate"
                placeholder="请输入小区名称"
                @select="handleSelectSearchEstate"
                clearable
                @clear="handleEstateClear"
                @input="handleEstateInput"
              ></el-autocomplete>
            </el-form-item>
          </el-col>

          <el-col :lg="6" :md="7" :sm="10">
            <el-form-item>
              <el-date-picker
                v-model="search.lastPublishDate"
                type="daterange"
                range-separator="至"
                start-placeholder="上次发房日期"
                end-placeholder="上次发房日期"
                :editable="false"
                value-format="timestamp"
                :default-time="['00:00:00', '23:59:59']"
                @change="handleDateClear"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :lg="6" :md="7">
            <el-form-item>
              <el-date-picker
                v-model="search.updateTime"
                type="daterange"
                range-separator="至"
                start-placeholder="更新日期"
                end-placeholder="更新日期"
                :editable="false"
                value-format="timestamp"
                :default-time="['00:00:00', '23:59:59']"
                @change="handleDateClear"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :lg="4">
            <el-form-item>
              <el-select v-model="search.houseSalesStatus" placeholder="房源状态">
                <el-option
                  v-for="dict in houseSalesStatusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- list -->
      <div class="list">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          header-cell-class-name="list-header"
          size="mini"
          stripe
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center"></el-table-column>
          <el-table-column
            v-for="item in tableOptions"
            :key="item.id"
            :label="item.label"
            :prop="item.prop"
            :width="item.width"
            :min-width="item.minWidth"
          >
            <template slot-scope="{ row }">
              <span v-if="item.prop">{{ row[item.prop] }}</span>

              <template v-if="item.id == 'TAB_INFO'">
                <HouseListItemBase :row="row" @clickTag="handleTagClick" @clickTitle="handleEdit"></HouseListItemBase>
              </template>

              <div v-if="item.id == 'TAB_TIME'">{{ row.updateTime }} ({{ row.updateDateInterval }})</div>

              <div v-if="item.id == 'TAB_LAST'">
                <template v-if="row.pushTime">
                  <div>{{ row.pushTime }} ({{ row.pushDateInterval }})</div>
                  <span
                    :class="['text-blue', 'mr10', !row.pushTime ? 'pointer-disabled' : 'pointer']"
                    @click="!row.pushTime ? () => {} : handleShowLog(row.id)"
                  >
                    推送日志
                  </span>
                </template>
                <template v-else>
                  <div>--</div>
                </template>
              </div>

              <div v-if="item.id == 'TAB_CONTROL'">
                <template v-for="controlItem in controlOptions">
                  <!-- 普通按钮 -->
                  <template v-if="!controlItem.children">
                    <span
                      class="text-blue pointer mr10"
                      v-if="controlItem.isShow(row)"
                      :key="controlItem.id"
                      @click="controlItem.handle && controlItem.handle(row)"
                    >
                      {{ controlItem.title }}
                    </span>
                  </template>
                  <!-- 更多按钮 -->
                  <template v-if="controlItem.children && controlItem.isShow(row)">
                    <el-dropdown @command="handleDropdown" :key="controlItem.id">
                      <span class="text-blue pointer mr10 fs-sm">
                        更多功能
                        <i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <template v-for="moreItem in controlItem.children">
                          <el-dropdown-item
                            :key="moreItem.id"
                            v-if="moreItem.isShow(row)"
                            :command="{
                              row,
                              moreItem
                            }"
                          >
                            {{ moreItem.title }}
                          </el-dropdown-item>
                        </template>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </template>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="gap-h60"></div>

      <!-- 操作 -->
      <div class="control" :style="{ left: sidebar.opened ? '210px' : '54px' }">
        <el-checkbox isIndeterminate v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-button
          class="ml30"
          size="small"
          type="primary"
          :disabled="!(tableSelect && tableSelect.length)"
          @click="hanldePublishMulti"
        >
          批量推送
        </el-button>
        <el-button size="small" plain :disabled="!(tableSelect && tableSelect.length)" @click="handleDelete"
          >删除</el-button
        >
        <el-button
          v-if="search.houseSalesStatus === 'UNAVAILABLE'"
          size="small"
          plain
          :disabled="!(tableSelect && tableSelect.length)"
          @click="handlePutUpDown"
          >上架</el-button
        >
        <el-button
          v-if="search.houseSalesStatus === 'AVAILABLE'"
          size="small"
          plain
          :disabled="!(tableSelect && tableSelect.length)"
          @click="handlePutUpDown"
          >下架</el-button
        >
        <div class="fr">
          <el-pagination
            :total="search.pageTotal"
            :page-size="search.pageSize"
            :current-page="search.pageIndex"
            :page-sizes="[10, 20, 30, 50]"
            layout="prev, pager, next, jumper, total, sizes"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentChange"
            background
          >
          </el-pagination>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="empty">
        <el-image style="width: 280px; height: 176px;" :src="require('@/assets/images/list_empty@1x.png')"></el-image>
        <div class="mt30">您暂无可发布的房源，点击房源搬家采集房源即可发布</div>
        <el-button class="empty-btn" type="primary" round @click="handleJumpMove">房源搬家</el-button>
      </div>
    </template>

    <!-- log dialog -->
    <ComLog v-if="isShowLogDialog" :houDelId="currentControlData.delId" @oncloselog="handleHideLog" />

    <!-- edit dialog -->
    <!-- type: resource edit -->
    <!-- tab：TAB_IMG  TAB_VIDEO  TAB_VR-->
    <ComExceptionPop
      v-if="excVisible"
      :delId="currentControlData.delId"
      :excVisible.sync="excVisible"
      :type="currentControlData.type || 'edit'"
      :tab="currentControlData.tab"
      from="success"
      @change="handleHouseChange"
    />

    <!-- 补充室内图弹窗 -->
    <DialogUpdateImg
      v-if="isShowUpdateImgDialog"
      @ontoggle="handleToggleDialog"
      @onsaveimg="handleSaveIndoorImg"
      :houDelId="currentControlData.delId"
    ></DialogUpdateImg>

    <!-- 去水印弹窗 -->
    <DialogWaterMark
      v-if="isShowWatermark"
      :houDelId="currentControlData.delId"
      @onclose="handleWatermarkChange"
    ></DialogWaterMark>
  </div>
</template>

<script>
import HouseListItemBase from './HouseListItemBase';
import Sticky from '@/components/Sticky';
import ComLog from '@/views/house/dialog/com-log';
import ComExceptionPop from '../../ComExceptionPop';
import DialogUpdateImg from '@/views/house/dialog/dialog-update-img.vue';
import DialogWaterMark from '@/views/house/dialog/dialog-water-mark.vue';

import { scrollTo } from '@/utils/scroll-to';
import { getPushAblePortList, menuHandler } from '@/handler/menuHandler';
import { mapGetters } from 'vuex';
import { downLoadZip, downLoadVideo } from '@/utils/utilsNew';
import { DOWN_LOAD_PIC, DOWN_LOAD_FULL, DOWN_LOAD_VIDEO, VR_COMPOUND_VIDEO, WATER_MARK } from '@/config/menuId';

export default {
  name: 'PublishHouseSuccessList',

  components: {
    HouseListItemBase,
    ComLog,
    ComExceptionPop,
    Sticky,
    DialogUpdateImg,
    DialogWaterMark
  },

  props: {
    total: {
      type: Number,
      default: 0
    }
  },

  data() {
    this.checkTimer = null;
    this.houseSalesStatusOptions = [
      { dictValue: 'AVAILABLE', dictLabel: '在售房源' },
      { dictValue: 'UNAVAILABLE', dictLabel: '下架房源' }
    ];
    this.controlOptions = [
      {
        id: 'PUBLISH_HOUSE',
        title: '推送',
        isShow: () => true,
        handle: (row) => {
          this.hanldePublishSingle(row.id);
        }
      },
      {
        id: 'EDIT_HOUSE',
        title: '修改',
        isShow: () => true,
        handle: (row) => {
          this.handleEdit(row.id);
        }
      },
      {
        id: 'REPLENISH_IMG',
        title: '补充室内图',
        isShow: (row) => row.houSubType === '1',
        handle: (row) => {
          if (this.checkVrLoading(row.houSubTypeState)) {
            this.currentControlData = { delId: row.id };
            this.isShowUpdateImgDialog = true;
          }
        }
      },
      {
        id: 'MORE',
        title: '更多功能',
        isShow: (row) => true,
        handle: (row) => {},
        children: [
          {
            id: 'WIPE_MARK',
            title: '去除实勘牌',
            menuId: WATER_MARK,
            isShow: (row) => true,
            handle: (row) => {
              this.currentControlData = { delId: row.id };
              this.isShowWatermark = true;
            }
          },
          {
            id: 'COMPOUND_VIDEO',
            title: '合成视频',
            menuId: VR_COMPOUND_VIDEO,
            isShow: (row) => true,
            handle: (row) => {
              this.checkMenuAuth(VR_COMPOUND_VIDEO).then(() => {
                this.vrToVideo(row);
              });
            }
          },
          {
            id: 'DOWNLOAD_IMG',
            title: '下载图片',
            menuId: DOWN_LOAD_PIC,
            isShow: (row) => !!row.imgUrl,
            handle: (row) => {
              this.checkMenuAuth(DOWN_LOAD_PIC).then(() => {
                this.downloadImg(row, 'pic', DOWN_LOAD_PIC);
              });
            }
          },
          {
            id: 'DOWNLOAD_VR',
            title: '下载全景图',
            menuId: DOWN_LOAD_FULL,
            isShow: (row) => row.sphereStatus == '10',
            handle: (row) => {
              this.checkMenuAuth(DOWN_LOAD_FULL).then(() => {
                this.downloadImg(row, 'pan', DOWN_LOAD_FULL);
              });
            }
          },
          {
            id: 'DOWNLOAD_VIDEO',
            title: '下载视频',
            menuId: DOWN_LOAD_VIDEO,
            isShow: (row) => row.videoMaterial === '1' && row.videoStatus !== '1',
            handle: (row) => {
              this.checkMenuAuth(DOWN_LOAD_VIDEO).then(() => {
                this.downloadVideo(row, DOWN_LOAD_VIDEO);
              });
            }
          }
        ]
      }
    ];
    return {
      isShowWatermark: false,
      isShowUpdateImgDialog: false,
      pushStateloading: false,
      isShowPage: false,
      excVisible: false,
      isShowLogDialog: false,
      checkAll: false,
      loading: false,
      search: {
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 10,
        estate: '',
        estateId: '',
        lastPublishDate: '',
        updateTime: '',
        houseSalesStatus: 'AVAILABLE'
      },
      tableOptions: [
        { id: 'TAB_INFO', label: '基础信息', minWidth: '400' },
        { id: 'TAB_TIME', label: '更新时间', minWidth: '180' },
        { id: 'TAB_LAST', label: '上次发房时间', minWidth: '180' },
        { id: 'TAB_CONTROL', label: '操作', minWidth: '230' }
      ],
      tableSelect: [],
      tableData: [],
      currentControlData: {}
    };
  },

  computed: {
    ...mapGetters(['sidebar', 'sessionUser'])
  },

  watch: {
    tableSelect: {
      handler: function(val) {
        if (val && val.length && val.length === this.tableData.length) {
          this.checkAll = true;
        } else {
          this.checkAll = false;
        }
      },
      immediate: true,
      deep: true
    }
  },

  beforeMount() {},

  mounted() {
    this.pushList(1, true);
  },

  beforeDestroy() {
    this.clearTimer('checkTimer');
  },

  methods: {
    // ------------------handle------------------
    // 搜索列表
    handleSearch() {
      this.pushList(1);
    },
    // 重置全部筛选
    handleReset() {
      this.search.estate = '';
      this.search.estateId = '';
      this.search.lastPublishDate = [];
      this.search.updateTime = [];
      this.search.houseSalesStatus = 'AVAILABLE';
      this.pushList(1);
    },
    // 清除日期筛选
    handleDateClear(e) {
      if (e === null) {
        this.pushList(1);
      }
    },
    // 搜索小区
    handleEstateInput() {
      if (this.search.estateId) {
        this.search.estateId = '';
      }
    },
    // 选择小区
    handleSelectSearchEstate(e) {
      this.search.estateId = e.id || '';
      this.search.estate = e.value || '';
    },
    // 清除小区筛选
    handleEstateClear() {
      this.search.estate = '';
      this.search.estateId = '';
      this.pushList(1);
    },
    // 切换分页index
    handleCurrentChange(e) {
      this.pushList(e);
    },
    // 切换分页size
    handlePageSizeChange(e) {
      this.search.pageSize = e;
      this.pushList(1);
      scrollTo(0, 800);
    },
    // 编辑房源
    handleEdit(id) {
      this.currentControlData = { delId: id };
      this.excVisible = true;
    },
    // 保存编辑
    handleHouseChange() {
      this.$emit('countChange');
      this.pushList(null, true);
      this.currentControlData = {};
    },
    // 开日志
    handleShowLog(houdelId) {
      this.currentControlData = { delId: houdelId };
      this.isShowLogDialog = true;
    },
    // 关日志
    handleHideLog() {
      this.isShowLogDialog = false;
      this.currentControlData = {};
    },
    // 单个推送
    async hanldePublishSingle(delId) {
      this.checkPublishStatus(delId).then(() => {
        this.$emit('publish', { data: [delId], source: 'SUCCESS_LIST', handler: this.publishSuccess.bind(this) });
      });
    },
    // 多选
    handleSelectionChange(e) {
      this.tableSelect = e.map((item) => item.id);
    },
    // 全选
    handleCheckAllChange() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    // 批量推送
    hanldePublishMulti() {
      this.$emit('publish', {
        data: [...this.tableSelect],
        source: 'SUCCESS_LIST',
        handler: this.publishSuccess.bind(this)
      });
    },
    // 批量上下架
    async handlePutUpDown() {
      try {
        const { tableSelect } = this;
        const { houseSalesStatus } = this.search;
        this.$confirm(`您确定要${houseSalesStatus === 'AVAILABLE' ? '下架' : '上架'}房源?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(async () => {
            let res = await this.$api.downDelAndHmCooperationHouse({
              delId: tableSelect.join(),
              state: houseSalesStatus === 'AVAILABLE' ? 'UNAVAILABLE' : 'AVAILABLE',
              invalidType: '1'
            });
            if (res && res.isSuccess) {
              this.$alert(res.content.msg, '提示', {
                showClose: false,
                confirmButtonText: '确定'
              });
            } else {
              this.$alert(`${houseSalesStatus === 'AVAILABLE' ? '下架' : '上架'}失败,请稍后再试!`, '提示', {
                showClose: false,
                confirmButtonText: '确定'
              });
            }
            this.pushList(1);
          })
          .catch(() => {});
      } catch (error) {
        console.log('error', error);
      }
    },
    // 批量删除
    async handleDelete() {
      try {
        this.$confirm('是否确认删除房源?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(async () => {
            let res = await this.$api.deleteHouseByIds({
              ids: this.tableSelect
            });
            if (res && res.isSuccess && res.content) {
              this.$message.success(`已成功删除${res.content.successCount}套，失败${res.content.errorCount}套`);
              this.pushList(1);
            } else {
              this.$message.error('删除失败，请稍后再试~');
            }
          })
          .catch(() => {});
      } catch (error) {}
    },
    // 跳转搬家
    handleJumpMove() {
      this.$router.push({
        name: 'moveHouse'
      });
    },
    // 点击更多
    handleDropdown(command) {
      command.moreItem.handle(command.row);
    },
    // 切换补充室内图弹窗
    handleToggleDialog(val) {
      this.isShowUpdateImgDialog = val;
    },
    // 保存室内图
    handleSaveIndoorImg(tagCode, newValue, otherList) {
      let houImgList = [...newValue, ...otherList];
      houImgList.forEach((item, index) => (item.cover = index));
      return this.$api
        .updateImage({ houImgList })
        .catch((error) => {
          this.$message.error('图片保存超时！');
          return Promise.reject();
        })
        .then(({ isSuccess, errorMessage = '' }) => {
          if (!isSuccess) {
            return this.$messageBox.confirm(`保存图片失败，${errorMessage}`, {
              confirmButtonText: '我知道了',
              showCancelButton: false
            });
          } else {
            this.$message.success('图片保存成功！');
            this.pushList(0, true);
          }
        });
    },
    // 保存去水印
    handleWatermarkChange(e) {
      this.isShowWatermark = false;
      // 刷新页面
      if (e) {
        this.pushList(0, true);
      }
    },
    // 点击标签
    handleTagClick(e) {
      this.currentControlData = { delId: e.delId, type: 'resource', tab: e.tab };
      this.excVisible = true;
    },
    // ------------------function------------------
    // 加载小区列表
    async loadSearchEstate(query, cb) {
      try {
        if (!(query && query.trim())) {
          cb([]);
          return;
        }
        let res = await this.$api.likeResblockName({
          keyWord: query,
          page: 1,
          pageSize: 40
        });
        let result = res.content.rows.map((item) => {
          return { value: item.resblockName, id: item.resblockId };
        });
        cb(result);
      } catch (error) {
        cb([]);
        console.log('error', error);
      }
    },
    // 加载房源列表
    async pushList(currentIndex, stopScroll = false) {
      try {
        this.clearTimer('checkTimer');
        this.loading = true;
        const { pageIndex, pageSize, estate, estateId, lastPublishDate, updateTime, houseSalesStatus } = this.search;
        const params = {
          resblockId: estateId || null,
          resblockName: estateId ? null : estate || null,
          updateStartTime: (updateTime && updateTime[0]) || null,
          updateEndTime: (updateTime && updateTime[1]) || null,
          pushStartTime: (lastPublishDate && lastPublishDate[0]) || null,
          pushEndTime: (lastPublishDate && lastPublishDate[1]) || null,
          pushFlag: '0',
          currentPage: currentIndex || pageIndex,
          pageSize: pageSize,
          delegationType: 'SALES',
          portType: await getPushAblePortList(),
          state: houseSalesStatus
        };
        const res = await this.$api.pushList(params);
        if (res && res.isSuccess && res.content) {
          let result = res.content || {};
          this.search.pageIndex = params.currentPage;
          this.search.pageTotal = result.total || 0;
          this.tableData = result.records || [];
          this.checkTagStatus();
        }
      } catch (error) {
        console.log('error', error);
      } finally {
        this.loading = false;
        this.isShowPage = true;
        if (!stopScroll) {
          scrollTo(0, 800);
        }
      }
    },
    // 校验推送中
    checkPublishStatus(delId) {
      this.pushStateloading = true;
      return new Promise(async (resolve, reject) => {
        const res = await this.$api.getPushState({ delId });
        this.pushStateloading = false;
        if (res && res.content && res.content.pushStatus === 'T') {
          this.$message({
            message: '该房源已在推送中，点击推送日志可以查看推送进度～',
            type: 'warning',
            duration: 2000
          });
          reject();
        } else {
          resolve();
        }
      });
    },
    // 处理推送成功
    publishSuccess() {
      this.$confirm('房源发布任务提交成功，您可以前往发布日志查看结果', '提示', {
        confirmButtonText: '前往查看',
        cancelButtonText: '继续发房',
        type: 'success'
      })
        .then(() => {
          this.$router.push({
            name: 'log'
          });
        })
        .catch(() => {
          this.pushList(null, true);
        });
    },
    // 校验vr是否在下载中
    checkVrLoading(state) {
      if (state === '1') {
        this.$message.error('VR正在下载中，请等待VR下载完后使用～');
        return false;
      }
      return true;
    },
    // 校验按钮权限
    checkMenuAuth(menuId) {
      return new Promise((resolve, reject) => {
        menuHandler
          .call(this, menuId)
          .then(() => {
            resolve();
          })
          .catch((error) => {
            reject();
          });
      });
    },
    // 合成视频
    vrToVideo(row) {
      const { id: delId, videoMaterial, videoStatus, houSubTypeState } = row;
      if (videoStatus === '1') {
        return this.$message.error('视频正在合成中，稍后再试～');
      }
      if (houSubTypeState === '1') {
        return this.$message.error('VR正在下载中，请等待VR下载完后使用～');
      }
      if (videoMaterial === '1') {
        this.$confirm('重新上传视频会替换现有视频，是否继续？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
          .then(() => {
            this.$router.push({
              name: 'vrTurnVideo',
              params: { houDelId: delId, required: '0' }
            });
          })
          .catch(() => {});
      } else {
        this.$router.push({
          name: 'vrTurnVideo',
          params: { houDelId: delId, required: '0' }
        });
      }
    },
    // 下载图片/全景图
    downloadImg(row, type, menuId) {
      const { id: delId, title } = row;
      this.$api
        .downloadPic({ delId, type })
        .then(({ data }) => {
          this.$message.success('已开始下载，请稍后~');
          downLoadZip(data, title);
          this.$api.getMemberPower({
            menuId,
            agentId: this.sessionUser.id
          });
        })
        .catch(() => {});
    },
    // 下载视频
    downloadVideo(row, menuId) {
      const { id: delId, title } = row;
      this.$api
        .getOssfiles(delId, title)
        .then(({ data }) => {
          this.$message.success('已开始下载，请稍后~');
          downLoadVideo(data, title);
          this.$api.getMemberPower({
            menuId: menuId,
            agentId: this.sessionUser.id
          });
        })
        .catch(() => {});
    },
    // 收集列表tag下载中状态的数据
    getListByPending() {
      const { tableData } = this;
      let list = tableData.filter((item) => {
        return item.videoStatus === '1' || item.sphereStatus === '1' || item.houSubTypeState === '1';
      });
      let formatList = list.map((item) => {
        return {
          delId: item.id,
          houSubTypeState: item.houSubTypeState,
          sphereStatus: item.sphereStatus,
          videoStatus: item.videoStatus
        };
      });
      return formatList;
    },
    // 对比列表tag是否变化
    diffTagStatus(oldList, newList) {
      let tag = ['houSubTypeState', 'sphereStatus', 'videoStatus'];
      let flag = {
        change: false,
        unfinished: false
      };
      oldList.forEach((item, index) => {
        tag.forEach((tagItem) => {
          if (newList[index] && newList[index][tagItem] === '1') {
            flag.unfinished = true;
          }
          if (newList[index] && newList[index][tagItem] !== item[tagItem]) {
            flag.change = true;
          }
        });
      });
      return flag;
    },
    // 刷新列表tag状态
    async checkTagStatus() {
      try {
        let param = this.getListByPending();
        if (!(param && param.length)) {
          return;
        }
        this.checkTimer = setInterval(async () => {
          let res = await this.$api.pushListStatus(param);
          let diff = this.diffTagStatus(param, res.content);
          if (!diff.unfinished) {
            this.clearTimer('checkTimer');
          }
          if (diff.change) {
            this.pushList(0, true);
          }
        }, 10000);
      } catch (error) {
        console.log('error', error);
      }
    },
    // 清除定时器
    clearTimer(name) {
      if (this[name]) {
        clearInterval(this[name]);
        clearTimeout(this[name]);
        this[name] = null;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.form {
  position: relative;
  margin: 20px 20px 0;
  padding: 20px 120px 5px 20px;
  border-radius: 10px;
  background-color: #fff;

  .form-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
  }
}

.list {
  margin: 20px;
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;

  & /deep/ .el-table::before {
    height: 0;
  }

  & /deep/ .list-header {
    height: 56px;
    color: #213654;
    background-color: #dfecff;
  }

  & /deep/ .el-table__header .el-table-column--selection .cell {
    display: none;
  }

  & /deep/ .el-table td {
    border: none;
  }

  & /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #f8fbff;
  }
}

.control {
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0 40px;
  height: 60px;
  background-color: #fff;
  z-index: 1;
  transition: all 0.3s;
}

.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 124px);

  .empty-btn {
    margin-top: 40px;
    width: 240px;
    height: 48px;
    border-radius: 999px;
    padding: 0;
    font-weight: 700;
  }
}

.gap-h60 {
  height: 60px;
}
</style>
